﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout Page</title>

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="static/css/fc1ab68d70ad48e88943ce422f4566dc.css" rel="stylesheet" />
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="static/css/animate.min.css" />
<link rel="stylesheet" href="static/css/all.min.css" />
<link rel="stylesheet" href="static/css/jarallax.css" />
<link rel="stylesheet" href="static/css/organik-icons.css" />
<link rel="stylesheet" href="static/css/jquery.magnific-popup.css" />
<link rel="stylesheet" href="static/css/nouislider.min.css" />
<link rel="stylesheet" href="static/css/nouislider.pips.css" />
<link rel="stylesheet" href="static/css/odometer.min.css" />
<link rel="stylesheet" href="static/css/swiper.min.css" />
<link rel="stylesheet" href="static/css/tiny-slider.min.css" />

<link rel="stylesheet" href="static/css/organik.css" />
</head>
<body>
<div class="preloader">
<img class="preloader__image" width="55" src="static/picture/loader.png" alt="" />
</div>

<div class="page-wrapper">
<header class="main-header">
<div class="topbar">
<div class="container">
<div class="main-logo">
<a href="index.html" class="logo">
<img src="static/picture/logo-dark.png" width="105" alt="">
</a>
<div class="mobile-nav__buttons">
<a href="#" class="search-toggler"><i class="organik-icon-magnifying-glass"></i></a>
<a href="#" class="mini-cart__toggler"><i class="organik-icon-shopping-cart"></i></a>
</div>
<span class="fa fa-bars mobile-nav__toggler"></span>
</div>
<div class="topbar__left">
<div class="topbar__social">
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-facebook-square"></a>
<a href="#" class="fab fa-instagram"></a>
</div>
<div class="topbar__info">
<i class="organik-icon-email"></i>
<p>Email <a href="/cdn-cgi/l/email-protection#5c35323a331c332e3b3d323537723f3331"><span class="__cf_email__" data-cfemail="4f262129200f203d282e212624612c2022">[email&#160;protected]</span></a></p>
</div>
</div>
<div class="topbar__right">
<div class="topbar__info">
<i class="organik-icon-calling"></i>
<p>Phone <a href="tel:+92-666-888-0000">92 666 888 0000</a></p>
</div>
<div class="topbar__buttons">
<a href="#" class="search-toggler"><i class="organik-icon-magnifying-glass"></i></a>
<a href="#" class="mini-cart__toggler"><i class="organik-icon-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
<nav class="main-menu">
<div class="container">
<div class="main-menu__login">
<a href="#"><i class="organik-icon-user"></i>Login / Register</a>
</div>
<ul class="main-menu__list">
<li class="dropdown">
<a href="index.html">Home</a>
<ul>
<li>
<a href="index.html">Home One</a>
</li>
<li><a href="index-2.html">Home Two</a></li>
<li class="dropdown">
<a href="#">Header Styles</a>
<ul>
<li><a href="index.html">Header One</a></li>
<li><a href="index-2.html">Header Two</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="about.html">About</a>
</li>
<li class="dropdown">
<a href="products.html">Shop</a>
<ul>
<li><a href="products.html">Shop</a></li>
<li><a href="product-details.html">Product Details</a></li>
<li><a href="cart.html">Cart Page</a></li>
<li><a href="checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown"><a href="news.html">News</a>
<ul>
<li><a href="news.html">News</a></li>
<li><a href="news-details.html">News Details</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="main-menu__language">
<img src="static/picture/flag-1-1.jpg" alt="">
<label class="sr-only" for="language-select">select language</label>

<select class="selectpicker" id="language-select-header">
<option value="english">English</option>
<option value="arabic">Arabic</option>
</select>
</div>
</div>
</nav>

</header>
<div class="stricky-header stricked-menu main-menu">
<div class="sticky-header__content"></div>
</div>
<section class="page-header">
<div class="page-header__bg" style="background-image: url(static/images/page-header-bg-1-1.jpg);"></div>

<div class="container">
<h2>Checkout</h2>
<ul class="thm-breadcrumb list-unstyled">
<li><a href="index.html">Home</a></li>
<li>/</li>
<li><span>Checkout</span></li>
</ul>
</div>
</section>
<section class="checkout-page">
<div class="container">
<p>Returning Customer? <a href="#">Click here to Login</a></p>
<div class="row">
<div class="col-lg-6">
<h3>Billing Details</h3>
<form action="#" class="contact-form-validated contact-one__form">
<div class="row">
<div class="col-md-12">
<select class="selectpicker">
<option value="">Select a Country</option>
<option value="">Select a Country</option>
<option value="">Select a Country</option>
<option value="">Select a Country</option>
</select>
</div>
<div class="col-md-6">
<input type="text" name="fname" placeholder="First Name">
</div>
<div class="col-md-6">
<input type="text" name="lname" placeholder="Last Name">
</div>
<div class="col-md-12">
<input type="text" name="company" placeholder="Company">
</div>
<div class="col-md-12">
<input type="text" name="address" placeholder="Address">
</div>
<div class="col-md-12">
<input type="text" name="appartment" placeholder="Appartment, Unit, etc. (optional)">
</div>
<div class="col-md-12">
<input type="text" name="town" placeholder="Town / City">
</div>
<div class="col-md-6">
<input type="text" placeholder="State" name="state">
</div>
<div class="col-md-6">
<input type="text" placeholder="Zip Code" name="zip">
</div>
<div class="col-md-6">
<input type="email" placeholder="Email Address" name="email">
</div>
<div class="col-md-6">
<input type="text" placeholder="Phone" name="phone">
</div>
<div class="col-md-12">
<div class="form-group">
<input type="checkbox" id="createAccount">
<label for="createAccount">Create an Account?</label>
</div>
</div>
</div>
</form>
</div>
<div class="col-lg-6">
<h3>
<input type="checkbox" id="shipDetails">
<label for="shipDetails">Ship to a Different Address</label>
</h3>
<form action="#" class="contact-form-validated contact-one__form">
<div class="row">
<div class="col-md-12">
<select class="selectpicker">
<option value="">Select a Country</option>
<option value="">Select a Country</option>
<option value="">Select a Country</option>
<option value="">Select a Country</option>
</select>
</div>
<div class="col-md-6">
<input type="text" name="fname" placeholder="First Name">
</div>
<div class="col-md-6">
<input type="text" name="lname" placeholder="Last Name">
</div>
<div class="col-md-12">
<input type="text" name="company" placeholder="Company">
</div>
<div class="col-md-12">
<input type="text" name="address" placeholder="Address">
</div>
<div class="col-md-12">
<input type="text" name="appartment" placeholder="Appartment, Unit, etc. (optional)">
</div>
<div class="col-md-12">
<input type="text" name="town" placeholder="Town / City">
</div>
<div class="col-md-6">
<input type="text" placeholder="State" name="state">
</div>
<div class="col-md-6">
<input type="text" placeholder="Zip Code" name="zip">
</div>
<div class="col-md-6">
<input type="email" placeholder="Email Address" name="email">
</div>
<div class="col-md-6">
<input type="text" placeholder="Phone" name="phone">
</div>
<div class="col-md-12">
<textarea name="notes" placeholder="Notes About Your Order"></textarea>
</div>
</div>
</form>
</div>
</div>
<h3 class="order-title">Your Order</h3>
<div class="row">
<div class="col-md-6">
<div class="order-details">
<div class="order-details__top">
<p>Product</p>
<p>Price</p>
</div>
<p>
<span>Vagetables Pack</span>
<span>$9.99 USD</span>
</p>
<p>
<span>Subtotal</span>
<span>$9.99 USD</span>
</p>
<p>
<span>Shipping</span>
<span>$9.99 USD</span>
</p>
<p>
<span>Total</span>
<span>$9.99 USD</span>
</p>
</div>
</div>
<div class="col-md-6">
<div class="order-payment">
<ul id="accordion" class="list-unstyled" data-wow-duration="1500ms">
<li>
<h2 class="para-title active">
<span class="collapsed" role="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Direct Bank Transfer
</span>
</h2>
<div id="collapseTwo" class="collapse show" role="button" aria-labelledby="collapseTwo" data-parent="#accordion">
<p>Make your payment directly into our bank account. Please
use your Order ID as the payment reference. Your order
wont be shipped until the funds have cleared.</p>
</div>
</li>
<li>
<h2 class="para-title ">
<span class="collapsed" role="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Paypal Payment
<img src="static/picture/paypal-1-1.jpg" alt="">
</span>
</h2>
<div id="collapseOne" class="collapse " aria-labelledby="collapseOne" data-parent="#accordion">
<p>Make your payment directly into our bank account. Please
use your Order ID as the payment reference. Your order
wont be shipped until the funds have cleared.</p>
</div>
</li>
</ul>
</div>
<div class="text-right">
<a href="checkout.html" class="thm-btn">Place Your Order</a>
</div>
</div>
</div>
</div>
</section>
<footer class="site-footer background-black-2">
<img src="static/picture/footer-bg-1-1.png" alt="" class="site-footer__shape-1">
<img src="static/picture/footer-bg-1-2.png" alt="" class="site-footer__shape-2">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
<div class="footer-widget footer-widget__about-widget">
<a href="index.html" class="footer-widget__logo">
<img src="static/picture/logo-light.png" alt="" width="105" height="43">
</a>
<p class="thm-text-dark">Atiam rhoncus sit amet adip
scing sed ipsum. Lorem ipsum
dolor sit amet adipiscing <br>
sem neque.</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
<div class="footer-widget footer-widget__contact-widget">
<h3 class="footer-widget__title">Contact</h3>
<ul class="list-unstyled footer-widget__contact">
<li>
<i class="fa fa-phone-square"></i>
<a href="tel:666-888-0000">666 888 0000</a>
</li>
<li>
<i class="fa fa-envelope"></i>
<a href="/cdn-cgi/l/email-protection#1c75727a735c7f73716c7d7265327f7371"><span class="__cf_email__" data-cfemail="abc2c5cdc4ebc8c4c6dbcac5d285c8c4c6">[email&#160;protected]</span></a>
</li>
<li>
<i class="fa fa-map-marker-alt"></i>
<a href="#">66 top broklyn street.
New York</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
<div class="footer-widget footer-widget__links-widget">
<h3 class="footer-widget__title">Links</h3>
<ul class="list-unstyled footer-widget__links">
<li>
<a href="index.html">Top Sellers</a>
</li>
<li>
<a href="products.html">Shopping</a>
</li>
<li>
<a href="about.html">About Store</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="contact.html">Help</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
<div class="footer-widget">
<h3 class="footer-widget__title">Explore</h3>
<ul class="list-unstyled footer-widget__links">
<li>
<a href="products.html">New Products</a>
</li>
<li>
<a href="checkout.html">My Account</a>
</li>
<li>
<a href="contact.html">Support</a>
</li>
<li>
 <a href="contact.html">FAQs</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
<div class="footer-widget">
<h3 class="footer-widget__title">Newsletter</h3>
<form action="#" data-url="YOUR_MAILCHIMP_URL" class="mc-form">
<input type="email" name="EMAIL" id="mc-email" placeholder="Email Address">
<button type="submit">Subscribe</button>
</form>
<div class="mc-form__response"></div>
</div>
</div>
</div>
</div>
<div class="bottom-footer">
<div class="container">
<hr>
<div class="inner-container text-center">
<div class="bottom-footer__social">
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-facebook-square"></a>
<a href="#" class="fab fa-instagram"></a>
</div>
<p class="thm-text-dark">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
</div>
</div>
</div>
</footer>
</div>
<div class="mobile-nav__wrapper">
<div class="mobile-nav__overlay mobile-nav__toggler"></div>

<div class="mobile-nav__content">
<span class="mobile-nav__close mobile-nav__toggler"><i class="organik-icon-close"></i></span>
<div class="logo-box">
<a href="index.html" aria-label="logo image"><img src="static/picture/logo-light.png" width="155" alt="" /></a>
</div>

<div class="mobile-nav__container"></div>

<ul class="mobile-nav__contact list-unstyled">
<li>
<i class="organik-icon-email"></i>
<a href="/cdn-cgi/l/email-protection#eb858e8e8f838e879bab84998c8a858280c5888486"><span class="__cf_email__" data-cfemail="d4bab1b1b0bcb1b8a494bba6b3b5babdbffab7bbb9">[email&#160;protected]</span></a>
</li>
<li>
<i class="organik-icon-calling"></i>
<a href="tel:666-888-0000">666 888 0000</a>
</li>
</ul>
<div class="mobile-nav__top">
<div class="mobile-nav__language">
<img src="static/picture/flag-1-1.jpg" alt="">
<label class="sr-only" for="language-select">select language</label>

<select class="selectpicker" id="language-select">
<option value="english">English</option>
<option value="arabic">Arabic</option>
</select>
</div>
<div class="main-menu__login">
<a href="#"><i class="organik-icon-user"></i>Login / Register</a>
</div>
</div>
</div>

</div>

<div class="mini-cart">
<div class="mini-cart__overlay mini-cart__toggler"></div>
<div class="mini-cart__content">
<div class="mini-cart__top">
<h3 class="mini-cart__title">Shopping Cart</h3>
<span class="mini-cart__close mini-cart__toggler"><i class="organik-icon-close"></i></span>
</div>
<div class="mini-cart__item">
<img src="static/picture/cart-1-1.jpg" alt="">
<div class="mini-cart__item-content">
<div class="mini-cart__item-top">
<h3><a href="product-details.html">Banana</a></h3>
<p>$9.99</p>
</div>
<div class="quantity-box">
<button type="button" class="sub">-</button>
<input type="number" id="2" value="1" />
<button type="button" class="add">+</button>
</div>
</div>
</div>
<div class="mini-cart__item">
<img src="static/picture/cart-1-2.jpg" alt="">
<div class="mini-cart__item-content">
<div class="mini-cart__item-top">
<h3><a href="product-details.html">Tomato</a></h3>
<p>$9.99</p>
</div>
<div class="quantity-box">
<button type="button" class="sub">-</button>
<input type="number" id="2" value="1" />
<button type="button" class="add">+</button>
</div>
</div>
</div>
<div class="mini-cart__item">
<img src="static/picture/cart-1-3.jpg" alt="">
<div class="mini-cart__item-content">
<div class="mini-cart__item-top">
<h3><a href="product-details.html">Bread</a></h3>
<p>$9.99</p>
</div>
<div class="quantity-box">
<button type="button" class="sub">-</button>
<input type="number" id="2" value="1" />
<button type="button" class="add">+</button>
</div>
</div>
</div>
<a href="checkout.html" class="thm-btn mini-cart__checkout">Proceed To Checkout</a>
</div>
</div>
<div class="search-popup">
<div class="search-popup__overlay search-toggler"></div>

<div class="search-popup__content">
<form action="#">
<label for="search" class="sr-only">search here</label>
<input type="text" id="search" placeholder="Search Here..." />
<button type="submit" aria-label="search submit" class="thm-btn">
<i class="organik-icon-magnifying-glass"></i>
</button>
</form>
</div>

</div>

<a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-angle-up"></i></a>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-select.min.js"></script>
<script src="static/js/jarallax.min.js"></script>
<script src="static/js/jquery.ajaxchimp.min.js"></script>
<script src="static/js/jquery.appear.min.js"></script>
<script src="static/js/jquery.circle-progress.min.js"></script>
<script src="static/js/jquery.magnific-popup.min.js"></script>
<script src="static/js/jquery.validate.min.js"></script>
<script src="static/js/nouislider.min.js"></script>
<script src="static/js/odometer.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/tiny-slider.min.js"></script>
<script src="static/js/wnumb.min.js"></script>
<script src="static/js/wow.js"></script>
<script src="static/js/isotope.js"></script>
<script src="static/js/countdown.min.js"></script>

<script src="static/js/organik.js"></script>
</body>
</html>